<template>
	<view class="content">
		<swiper indicator-dots="" circular="true" indicator-active-color="red" autoplay="true" interval=5000>
			<swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.imgUrl"></image>
			</swiper-item>
		
			<!-- <swiper-item>
				<image src="http://127.0.0.1:9000/testupload/20201119/u%3D3557543371%2C89408500%26fm%3D26%26gp%3D0.jpg"></image>
			</swiper-item> -->
		</swiper>
		<view class="activity">
			<view class="text-area">
				{{recentActivity}}
			</view>
			
			<!-- 活动展示列表 -->
			<view class="activityList">
				<!-- 黑马ITEM -->
				<view class="news_item" >
					<image class="pic" src="http://127.0.0.1:9000/testupload/20201119/u%3D3557543371%2C89408500%26fm%3D26%26gp%3D0.jpg"></image>
					<view class="right">
						<view class="tit">项目的标题</view>
						<view class="info">
							<text>发表时间：</text>
							<text>发起人：</text>
						</view>
					</view>
				</view>
				
				<!-- 活动item -->
				<view class="activityItem" v-for="item in activityList" :key="item.activityId">
					<image class="pic" :src="item.pic"></image>
					<view class="text">
						<view class="title">{{item.title}}</view>
						<view class="descrption">
							<text class="descrption">
								{{item.description}}
							</text></view>
						<view class="totalPeople">{{item.currentPeople}}/{{item.totalPeople}}人</view>
					</view>
					<view class="btnGroup">
						<button class="btn" style="background-color: #007AFF;" 
							@click="check(item.activityId,item.principalId,item)">查看</button>
						<button class="btn" style="background-color: #4CD964;">参加</button>
						<!-- <button  class="btn" style="background-color: #4CD964;">
							<text v-if="isJoinActivity(item.activityId).data.data === false">参加</text>
							<text v-if="isJoinActivity(item.activityId).data.data === true">退出</text>
						</button> -->
						<!-- <button v-if="isJoinActivity(item.activityId) === true" class="btn" style="background-color: #4CD964;">退出</button> -->
					</view>
				</view>
				
				
			</view>
			<!-- <uni-pagination class="pageination" show-icon="true" :total=total :pageSize=limit :current=page title="最近活动"  @change="change()"></uni-pagination> -->
		
		</view>
		

		<!-- <view class="text-area">
			{{historyActivity}}
		</view>

		<view class="activityList">
			<view></view>
			<view>
				<uni-pagination class="pageination" title="历史活动" show-icon="true" total="50" current="2"></uni-pagination>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		data() {
			return {
				recentActivity: '所有活动',
				historyActivity: "历史活动",
				activityList: [],
				swipers: [],
				pageIndex: 1,
				limit: 8,
				total:0,
				userId: null,
				isJoin: null,
				flag: "",
			}
		},
		onLoad() {
			//this.getActivityList();
			this.setUserId();
			this.getSwiper();
			this.getActivityList2();
		},
		onReachBottom(){
			if(this.activityList.length<this.pageIndex*7){
				
			}
			console.log("触底了");
			console.log("pageIndex",this.pageIndex);
			this.pageIndex++;
			this.getActivityList2();
		},
		methods: {
			async isJoinActivity(activityId){
				const res = await this.$myRequest({
					url:'/userActivity/isJoinActivity?activityId='+activityId+'&userId='+this.userId,
					method:"post",
				});
				console.log("isJoinActivity 结果",res);
				this.isJoin = res.data.data;
				if(this.isJoin === true){
					this.flag = 1;
				}else{
					this.flag = 2;
				}
				return res.data.data;
			},
			
			change(e){
				this.getActivityList(e.current);
				console.log("点击了上下页",e);
			},
			//page
			getActivityList(){
				//var pageSize = page==null?this.page:page;
				uni.request({
					header: {
						'content-type': 'application/json', //如果后台使用 @Reuqestbody的，使用这种方式
					},
					url: "http://localhost:8090/activity/userFindPassActivity?page="+this.pageIndex+"&limit="+this.limit,
					//url: "http://localhost:8090/activity/userFindAllPassActivity",
					method: "GET",
					//dataType: "json",
					timeout: 60000,
					success: res=> {
						console.log(res);
						if (res.data.code == 200) {
							this.activityList = res.data.data;
							/* uni.showToast({
								title: "注册成功",
								icon: "none",
								mask: true,
								position: "top"
							}); */
							this.total = res.data.count;
						} else {
						}
					}
				});
				this.activityList = [...this.activityList, ...res.data.data];
			},
			
			//加载activityList，滑动加载更多
			async getActivityList2(callBack){
				const res = await this.$myRequest({
					url:'/activity/userFindPassActivity?page=' + this.pageIndex
				});
				console.log("挂载");
				console.log(res);
				console.log("挂载");
				this.activityList = [...this.activityList, ...res.data.data];
				callBack && callBack();
			},
			
			//获取轮播图
			async getSwiper(){
				const res = await this.$myRequest({
					url:'/photos/getPhotosList'
				});
				console.log("轮播图");
				console.log(res);
				console.log("轮播图");
				this.swipers = res.data.data;
				//callBack && callBack();
			},
			
			async setUserId(){
				uni.getStorage({
					key:"userId",
					success: (res) => {
						console.log("获取userId成功",res);
						this.userId = res.data
						console.log("getStorageSync this.userId "+this.userId);
					}
				});
				//console.log("设置成功, value =",value);
				console.log("this.userId =",this.userId);
			},
			
			async check(activityId,principalId,item){
				console.log("点击了查看",activityId);
				console.log("item对象",item);
				//await this.isJoinActivity(activityId);
				//uni.
				uni.navigateTo({
					url:"./activityDetail?activityId="+activityId+"&principalId="+principalId+"&userId="+this.userId+"&isJoin="+this.flag
				})
			},
			
		},
		onPullDownRefresh() {
			console.log("下拉刷新了");
			var v = this.isJoinActivity(2);
			console.log("onPullDownRefresh v = ",v);
			this.isJoinActivity(3);
			this.pageIndex  = 1;
			this.activityList = [];
			setTimeout(()=>{
				this.getActivityList2(()=>{
					uni.stopPullDownRefresh();
				});
			},1000)
			
		},
		components: {
			uniPagination
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		};
		//background: #eee;
		/* align-items: center; */
		/* justify-content: center; */
	}
	
	.activity{
		background: #eee;
		overflow: hidden;
		/* width: 750rpx; */
		/* display: flex;
		flex-direction: column;
		justify-content: center; */
		.text-area {
			//display: flex;
			height: 50px;
			line-height: 50px;
			text-align: center;
			letter-spacing: 20px;
			background: #fff;
			margin: 7rpx 0;
		}
		.news_item{
			background: #fff;
			display: flex;
			padding: 10rpx 20rpx;
			border-bottom: 1px solid $shop-color;
			image{
				width: 200rpx;
				height: 150rpx;
				max-width: 200rpx;
				min-width: 200rpx;
			}
			.right{
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tit{
					font-size: 30rpx;
				}
				.info{
					font-size: 24rpx;
					text:nth-child(2){
						margin-left: 30rpx;
					}
				}
			}
			
		}
		.activityList{
			display: flex;
			flex-direction: column;
			justify-content: center;
			.activityItem{
				width: 100%;
				height: 150rpx;
				display: flex;
				/* justify-content: space-around; */
				background: #fff;
				margin-top: 5rpx;
				/* flex-direction: row; */
				.pic{
					width: 140rpx;
					height: 140rpx;
					/* margin: 10rpx 10rpx; */
				}
				.text{
					height: 140rpx;
					text-align: left;
					margin-left: 30rpx;
					width: 450rpx;
					.title{
						font-weight: bolder;
					}
					.descrption{
						font-size: 26rpx;
						white-space: nowrap; //文本强制不换行；
						text-overflow:ellipsis; //文本溢出显示省略号；
						overflow:hidden; //溢出的部分隐藏；
					}
					.totalPeople{
						font-size: 26rpx;
					}
				}
				.btnGroup{
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.btn{
						/* height: 70rpx;
						width: 150rpx; 
						margin: 10rpx 10rpx;*/
						/* font-size: 30rpx;
						text-align: center;
						line-height: 70rpx;
						border-radius: 10px; */
						font-size: 27rpx;
						text-align: center;
						border: none;
						/* background-color: #007AFF; */
						color: #FFFFFF;
						line-height: 60rpx;
						border-radius: 30px;
					}
				}
			}
		}
		.pageination{
			/* width: 750rpx; */
			align-items: center;
			text-align: center;
		}
	}
</style>
